<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      position: relative;
      left: 100px;
      top: 50px;
    }
    .show{
      width: 400px;
      height: 400px;
      overflow: hidden;
      position: absolute;
      left:410px;
      top:0;
      display: none;
    }
    .show img{
      position: absolute;
    }
    .cover{
      width: 200px;
      height: 200px;
      background-color: yellow;
      opacity: 0.5;
      position: absolute;
      left:0;
      top:0;
      cursor:move;
      display: none;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="cover"></div>
    <img src="img/small.jpg" alt="">
    <div class="show">
      <img src="img/big.jpg" alt="">
    </div>
  </div>
  <script>
    var box = document.querySelector('.box');
    var cover = document.querySelector('.cover');
    var show = document.querySelector('.show');
    var img = document.querySelector('.show img');
    //1.设置鼠标进入时候，显示遮罩层和显示右侧图片
    box.onmouseenter = function(){
      cover.style.display = 'block';
      show.style.display = 'block';
    }
    //2.鼠标离开后，遮罩层和右侧图片隐藏
    box.onmouseleave = function(){
      cover.style.display = 'none';
      show.style.display = 'none';
    }
    //3.给box注册鼠标移动事件
    box.onmousemove = function(e){
      //获取鼠标移动的位置
      var mouse_x = e.clientX - this.offsetLeft;
      var mouse_y = e.clientY - this.offsetTop;
      //将鼠标的位置赋值给遮罩层(因为鼠标的位置是在 遮罩层的左上角)
      cover.style.left = mouse_x - cover.offsetWidth/2 + 'px';
      cover.style.top = mouse_y - cover.offsetHeight/2 + 'px';
      //保证遮罩层不能移动到盒子外部
      var current_x = cover.offsetLeft;
      var current_y = cover.offsetTop;
      //当前位置和圆点比较
      current_x = current_x <= 0 ? 0 : current_x;
      current_y = current_y <= 0 ? 0 : current_y;
      //约束遮罩盒子水平和垂直最大移动距离
      var max_x = this.offsetWidth - cover.offsetWidth;
      var max_y = this.offsetHeight - cover.offsetHeight;
      current_x = current_x >= max_x ? max_x : current_x;
      current_y = current_y >= max_y ? max_y : current_y;
      //设置当前遮罩层的位置
      cover.style.left = current_x + 'px';
      cover.style.top = current_y + 'px';
      //移动图片位置按照比例移动
      //遮罩盒子移动的距离 ：左侧盒子的宽度 = 右侧图片移动的距离 ：右侧图片的宽度
      //右侧图片移动的距离 = 遮罩盒子移动的距离 * 右侧图片的宽度 / 左侧盒子的宽度
      img.style.left = -current_x * img.offsetWidth / this.offsetWidth + 'px';
      img.style.top = -current_y * img.offsetHeight / this.offsetHeight + 'px';
    }
  </script>   
</body>
</html> -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      position: relative;
      left: 100px;
      top:50px;
    }
    .show{
      width: 400px;
      height: 400px;
      position: absolute;
      left:410px;
      top:0px;
      overflow: hidden;
      display: none;
    }
    .show img{
      position: absolute;
      left: 0;
      top:0;
    }
    .cover{
      width: 200px;
      height: 200px;
      background-color: yellow;
      opacity: 0.5;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="cover"></div>
    <img src="img/small.jpg" alt="">
    <div class="show">
      <img src="img/big.jpg" alt="">
    </div>
  </div>
  <script>
    var box = document.querySelector('.box');
    var cover = document.querySelector('.cover');
    var show = document.querySelector('.show');
    var img = document.querySelector('.show img');
    box.onmouseenter = function(){
      cover.style.display = 'block';
      show.style.display = 'block';
    }
    box.onmouseleave = function(){
      cover.style.display = 'none';
      show.style.display = 'none';
    }
    box.onmousemove =  function(e){
      var mouse_x = e.pageX - this.offsetLeft;
      var mouse_y = e.pageY - this.offsetTop;
      cover.style.left = mouse_x - cover.offsetWidth/2 + 'px';
      cover.style.top = mouse_y - cover.offsetHeight/2 + 'px';
      var current_x =  cover.offsetLeft;
      var current_y = cover.offsetTop;
      current_x = current_x < 0 ? 0 : current_x;
      current_y = current_y < 0 ? 0 : current_y;

      var max_x = this.offsetWidth - cover.offsetWidth;
      var max_y = this.offsetHeight - cover.offsetHeight;
      current_x = current_x >= max_x ? max_x : current_x;
      current_y = current_y >= max_y ? max_y : current_y;

      cover.style.left = current_x + 'px';
      cover.style.top = current_y + 'px';

      //覆盖盒子移动距离 ：大盒子宽度 = 图片移动距离 ：图片宽度
      //图片移动距离 = 覆盖盒子移动距离 * 图片宽度 / 大盒子宽度
      img.style.left = -cover.offsetLeft * img.offsetWidth / this.offsetWidth + 'px';
      img.style.top = -cover.offsetTop * img.offsetHeight / this.offsetHeight + 'px';
    } 
  </script>
</body>
</html>